<script setup>
import { logoutFn } from '@/api/login';
import router from '@/router';
import { showToast } from 'vant';
import { useUserStore } from '@/stores/user';
import setting from '@/assets/icon/shezhi.png'

const user = useUserStore()

if (!user.userInfo.userid) {
    router.push('/login')
}

function logout() {
    logoutFn().then(res => {
        showToast(res.message)
        router.push('/login')
    })
}

function tochange() {
    router.push('/changeInfo')
}

function tochangePassword() {
    router.push('/changePassword')
}

function to(path) {
    router.push(path)
}
</script>

<template>
    <div class="main">
        <van-nav-bar title="我的" />
        <div class="content">
            <div class="user">
                <img class="touxiang" :src="user.userInfo.img">

                <div class="intro">
                    {{ user.userInfo.username }}
                </div>
                <div class="setting" @click="tochange">
                    <img :src="setting">
                </div>
            </div>
            <div class="center">
                <section @click="to('/myPost')">
                    <h1>{{ user.userInfo.post.length }}</h1>
                    <p>发布</p>
                </section>
                <section @click="to('/myConcern')">
                    <h1>{{ user.userInfo.concern.length }}</h1>
                    <p>关注</p>
                </section>
                <section @click="to('/myFans')">
                    <h1>{{ user.userInfo.fans.length }}</h1>
                    <p>粉丝</p>
                </section>
            </div>
            <van-cell-group>
                <van-cell title="我的点赞" is-link icon="good-job-o" @click="to('/myLike')" />
                <van-cell title="我的收藏" is-link icon="star-o" @click="to('/myCollect')" />
                <van-cell title="浏览历史" is-link icon="clock-o" @click="to('/history')" />
                <van-cell title="修改密码" is-link icon="records-o" @click="tochangePassword" />
                <van-cell title="退出登录" is-link icon="close" @click="logout" />
            </van-cell-group>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.user {
    margin: 20px 0%;
    display: flex;
    justify-content: space-around;


    .touxiang {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .intro {
        font-size: 0.24rem;
        position: relative;
        top: 10px;
        left: 20px;
        flex: 1;
    }

    .setting {
        img {
            width: 30px;
            position: relative;
            top: 10px;
        }
    }
}

.center {
    display: flex;
    justify-content: space-around;
    text-align: center;

    section {
        flex: 1;
    }
}

.van-cell-group {
    .van-cell {
        background-color: rgba($color: #8a8a8a, $alpha: 0.2);
        border-radius: 10px;
        margin: 5px 0;
    }
}
</style>